<template>
    <Modal
        v-model="modal.show"
        :title="modal.title"
        :loading="modal.loading"
        @on-ok="saveContent"
        @on-cancel="hideModal"
    >
        <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
            <FormItem label="名称" prop="typeName">
                <Input
                    v-model="formValidate.typeName"
                    :placeholder="nameErrorTipNotSC"
                    :maxlength="64"
                ></Input>
            </FormItem>
            <FormItem label="描述" prop="description" key="description">
                <Input
                    type="textarea"
                    v-model="formValidate.description"
                    :maxlength="200"
                    placeholder="请输入描述"
                ></Input>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
import { addTypeRecord, updateTypeRecord } from '../api/typeRecord.js';
import { mapState } from 'vuex';
import { validateName1, nameErrorTip  } from '@/libs/reg';
// validateName1, nameErrorTipNotSC,
// import { nameErrorTipNotSC } from '@/libs/tip';
export default {
    name: 'EditModal',
    components: {},
    mixins: [], //treeDirectionData
    // inject: ['parent'],
    props: {
        title: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            nameErrorTipNotSC:nameErrorTip,
            modal: {
                show: false,
                data: '',
                loading: true,
            },
            formValidate: {
                description: '',
                typeName: '',
            },
            ruleValidate: {
                typeName: [
                    { required: true, message: '请输入类型名称', trigger: 'blur' },
                    { validator: validateName1, trigger: 'change, blur' },
                ],
            },
        };
    },
    computed: {
        ...mapState('user', ['nickname', 'userId', 'isRootDesigner']),
    },
    watch: {},
    mounted() {
        this._formValidate = { ...this.formValidate };
    },
    methods: {
        showModal(data) {
            let name = this.title;
            this.modal.show = true;
            this.op = data ? 'update' : 'add';
            if (!data) {
                this.modal.title = `创建${name}`;
                this.resetField();
            } else {
                this.modal.title = `修改${name}`;
                this.formValidate = {
                    ...data,
                };
            }
        },
        resetField() {
            this.formValidate = { ...this._formValidate };
            this.$refs.formValidate.resetFields();
        },
        saveContent() {
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    let params = { ...this.formValidate };
                    let reqApi;
                    if (this.op == 'add') {
                        reqApi = addTypeRecord(params);
                    } else {
                        reqApi = updateTypeRecord(params.id, params);
                    }
                    reqApi
                        .then(({ code, message }) => {
                            if (code === 1) {
                                this.$Message.info(`${this.modal.title}成功`);
                                this.hideModal();
                                this.$emit('ok', this.op);
                            } else {
                                this.$Message.error(message);
                            }
                            this.cancelLoading();
                        })
                        .catch((error) => {
                            this.cancelLoading();
                        });
                } else {
                    this.cancelLoading();
                }
            });
        },
        hideModal() {
            this.modal.show = false;
        },
        cancelLoading() {
            this.modal.loading = false;
            setTimeout(() => {
                this.modal.loading = true;
            });
        },
    },
};
</script>
<style scoped></style>
